<template>
  <div id="Root">
    <!-- 区域一 -->
    <div class="arae arae-1">
        <div
            @click="detailJump(PhotoContent[0].id)"
            class="Box Box-1 left-box" v-if="PhotoContent[0] != null"
            :style="`background-image: url(${PhotoContent[0].photoUrl.split(',')[0]});`"
            >
            <!-- <div class="box-bc" :style="`background-image: url(${PhotoContent[0].photoUrl.split(',')[0]});`"></div> -->
            <div class="box-content"> </div>
            <div style="position: relative;">
                <div class="content-top">
                    <img :src="PhotoContent[0].avatar" />
                    <div class="content-userInfo">
                        <span>{{ PhotoContent[0].nickname }}</span>
                        <span>发布时间：{{ PhotoContent[0].publishDateTime }}</span>
                    </div>
                </div>
                <div class="photo-description">
                    <span>【{{ PhotoContent[0].categoryName }}】</span>
                    <span> {{ PhotoContent[0].summary  }} </span>
                </div>
            </div>

        </div>
        <div
           @click="detailJump(PhotoContent[1].id)"

            class="Box Box-2 right-box" v-if="PhotoContent[1] != null"
            :style="`background-image: url(${PhotoContent[1].photoUrl.split(',')[0]});`"
        >
        <div class="box-content"> </div>
            <div style="position: relative;">
                <div class="content-top">
                    <img :src="PhotoContent[1].avatar" />
                    <div class="content-userInfo">
                        <span>{{ PhotoContent[1].nickname }}</span>
                        <span>发布时间：{{ PhotoContent[1].publishDateTime }}</span>
                    </div>
                </div>
                <div class="photo-description">
                    <span>【{{ PhotoContent[1].categoryName }}】</span>
                    <span> {{ PhotoContent[1].summary  }} </span>
                </div>
            </div>
        </div>
    </div>
    <!-- 区域二 -->
    <div class="arae arae-2" v-if="PhotoContent[2] != null">
        <div
             @click="detailJump(PhotoContent[2].id)"

            class="Box Box-1 right-box" v-if="PhotoContent[2] != null"
            :style="`background-image: url(${PhotoContent[2].photoUrl.split(',')[0]});`"
            >
            <!-- <div class="box-bc" :style="`background-image: url(${PhotoContent[0].photoUrl.split(',')[0]});`"></div> -->
            <div class="box-content"> </div>
            <div style="position: relative;">
                <div class="content-top">
                    <img :src="PhotoContent[2].avatar" />
                    <div class="content-userInfo">
                        <span>{{ PhotoContent[2].nickname }}</span>
                        <span>发布时间：{{ PhotoContent[2].publishDateTime }}</span>
                    </div>
                </div>
                <div class="photo-description">
                    <span>【{{ PhotoContent[2].categoryName }}】</span>
                    <span> {{ PhotoContent[2].summary  }} </span>
                </div>
            </div>

        </div>
        <div
           @click="detailJump(PhotoContent[3].id)"
            class="Box Box-2 left-box" v-if="PhotoContent[3] != null"
            :style="`background-image: url(${PhotoContent[3].photoUrl.split(',')[0]});`"
        >
        <div class="box-content"> </div>
            <div style="position: relative;">
                <div class="content-top">
                    <img :src="PhotoContent[3].avatar" />
                    <div class="content-userInfo">
                        <span>{{ PhotoContent[3].nickname }}</span>
                        <span>发布时间：{{ PhotoContent[3].publishDateTime }}</span>
                    </div>
                </div>
                <div class="photo-description">
                    <span>【{{ PhotoContent[3].categoryName }}】</span>
                    <span> {{ PhotoContent[3].summary  }} </span>
                </div>
            </div>
        </div>
    </div>
    <!-- 区域三 -->
    <div class="arae arae-3 arae-1" 
    @click="detailJump(PhotoContent[4].id)"
    
    v-if="PhotoContent[4]!=null">
            <div class="Box left-box"
            v-if="PhotoContent[4]!=null"
            :style="`background-image: url(${PhotoContent[4].photoUrl.split(',')[0]});;`"
            >
                <div class="box-content"> </div>
                <div style="position: relative;">
                    <div class="content-top">
                        <img :src="PhotoContent[4].avatar" />
                        <div class="content-userInfo">
                            <span>{{ PhotoContent[4].nickname }}</span>
                            <span>发布时间：{{ PhotoContent[4].publishDateTime }}</span>
                        </div>
                    </div>
                    <div class="photo-description">
                        <span>【{{ PhotoContent[4].categoryName }}】</span>
                        <span> {{ PhotoContent[4].summary  }} </span>
                    </div>
                </div>
            </div>

            <div class="right-box arae-4">


                <div class="Box Box-6"
                v-if="PhotoContent[5]!=null"
                 @click.stop="detailJump(PhotoContent[5].id)"
                :style="`background-image: url(${PhotoContent[5].photoUrl.split(',')[0]});;`"
                >
                    <div class="box-content"> </div>
                    <div style="position: relative;">
                        <div class="content-top">
                            <img :src="PhotoContent[5].avatar" />
                            <div class="content-userInfo">
                                <span>{{ PhotoContent[5].nickname }}</span>
                                <span>发布时间：{{ PhotoContent[5].publishDateTime }}</span>
                            </div>
                        </div>
                        <div class="photo-description">
                            <span>【{{ PhotoContent[5].categoryName }}】</span>
                            <span> {{ PhotoContent[5].summary  }} </span>
                        </div>
                    </div>
                </div>
                
                <div class="Box Box-7"
                v-if="PhotoContent[6]!=null"
                @click.stop="detailJump(PhotoContent[6].id)"

                :style="`background-image: url(${PhotoContent[6].photoUrl.split(',')[0]});;`"
                >
                    <div class="box-content"> </div>
                    <div style="position: relative;">
                        <div class="content-top">
                            <img :src="PhotoContent[6].avatar" />
                            <div class="content-userInfo">
                                <span>{{ PhotoContent[6].nickname }}</span>
                                <span>发布时间：{{ PhotoContent[6].publishDateTime }}</span>
                            </div>
                        </div>
                        <div class="photo-description">
                            <span>【{{ PhotoContent[6].categoryName }}】</span>
                            <span> {{ PhotoContent[6].summary  }} </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>

export default {
  name: "SchoolForumPhotoContentPlugin",
  props: ["detailJump","content"],
  data() {
    return {
      PhotoContent: [],
    };
  },

  mounted() {
    console.log(this);
    // console.log("ContentPlugin", this.content);  
    this.PhotoContent = this.content;
  },

  methods: {

  },
};
</script>

<style lang="scss" scoped>
#Root {
  width: 100%;
  .arae {
    width: 100%;
    height: 300px;
    display: flex;
    flex-flow: row;
    .Box {
      // height: 100%;

    }
  }
}
.arae-1 {
  margin-top: 20px;
  .left-box {
    flex: 3;
    // background-color: blue;
    margin-right: 10px;
  }
  .right-box {
    flex: 5;
    // background-color: red;
    margin-left: 10px;
  }
}
.arae-2 {
  margin-top: 20px;
  .left-box {
    flex: 3;
    // background-color: blue;
    margin-left: 10px;
  }
  .right-box {
    flex: 5;
    // background-color: red;
    margin-right: 10px;
  }
}
.arae-4 {
  display: flex;
  justify-content: space-between;
  div:nth-child(1) {
    margin-right: 10px;
  }
  div:nth-child(2) {
    margin-left: 10px;
  }
}
.box-content{
    width: 100%;
    height: 100%;
    transition:all .4s;
    background-position: 0px 200px;
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,1)0%,rgba(0,0,0,0.5)44%, rgba(0,0,0,0)99%);
    position: relative;
    top: 205px;
}
.Box{
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 1s;
    position: relative;
    background-position: center;

}
.Box:hover .box-content{
    top: 20px;
}
.content-top{
    padding: 20px;
    padding-bottom: 10px;
    position: relative;
    top: -80px;
    color: white;
    transition: all 1s;
    display: flex;
    .content-userInfo{

        margin-left:20px;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
    }
    span:nth-child(1){
        font-weight: bold;
        font-size: 20px;
    }
    span:nth-child(2){
        font-size: 14px;
    }
    span{
        // display: block;
        display: flex;
        align-items: center;

    }
    img{
        width: 50px;
        height: 50px;
    }
}
.photo-description{
    position: relative;
    top: -80px;
    color: rgb(195, 192, 192);
    transition: all 1s;
    padding: 20px;
    padding-top: 0px;
    padding-left: 10px;
    
}
.Box:hover .content-top{
    z-index: 10;
    top: -120px;
}
.Box:hover .photo-description{
    top: -120px;
}
.Box:hover {
    background-size: 102%;
    // background-size: auto;
}
</style>